<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form>
			<label for="">用户名:<input type="text" name='username' id='username' /></label>
			<label for="">用户名:<input type="text" name='password' id='password' /></label>
			<span id='info'></span>
			<input type="button" value="登录" id='btn' />
		</form>
		<script>
			window.onload = function() {
				var btn = document.querySelector("#btn");
				btn.onclick = function() {
					//1.创建XMLHttpRequest()实例对象
					var x = new XMLHttpRequest();
					//2.准备发送:
					var username = document.querySelector("#username");
					var pw = document.querySelector("#password");

					var param = 'username=' + username.value + '&password=' + pw.value;
					x.open('get', '03 get.php?' + encodeURI(param));
					//3.发送:
					x.send(null);
					//4.检测服务器的响应:
					x.onreadystatechange = function() {
						if(x.readyState == 4 && x.status == 200) {
							var data = x.responseText;
							var info = document.querySelector("#info");
							if(data == "登陆成功") {
								info.innerHTML = "登陆成功";
							} else if(data == "密码错误") {
								info.innerHTML = "密码错误";
							} else if(data == "用户名不正确") {
								info.innerHTML = "用户名不正确";
							}
						}
					}
				}
			}
		</script>
	</body>

</html>